import React, { Component ,cloneElement} from 'react'

import { connect } from 'react-redux'

import * as actions from './Action'
import { bindActionCreators } from "redux"
import { Button,ButtonToolbar} from 'react-bootstrap';
import {Link} from 'react-router';

class App extends  Component{
    constructor(props) {
        super(props);
        this.state={
            title:'React Bootstrap'
        };
    }
    itemClick(path){
        const title=this.getTitle(path)
        this.setState({
            title:title
        });
    }
    getTitle(pathname){
        debugger
        let text=this.state.title;
        switch (pathname){
            case '/button': text='#Button groups ButtonGroup, ButtonToolbar';break;
            case '/dropdown': text='#Dropdowns DropdownButton, SplitButton, Dropdown';break;
            case '/menuItms': text='#Menu items MenuItem';break;
            case '/modals': text='#Modals Modal';break;
            default:
                break;
        }
        return text;
    }
    render(){
        let layout = ''
        const childrenWithProps = React.Children.map(this.props.children,
            (child) => cloneElement(child, { })
        )
        let pathname = this.props.location.pathname
        let text=this.getTitle(pathname)
        layout = <div>
            {childrenWithProps}
        </div>
        return (
          <div>
              <Link to="/"><h1>{text}</h1></Link>
              <ButtonToolbar>
                  <Link to="/button"><Button  bsStyle="link" onClick={()=>this.itemClick('/button')}>Button</Button></Link>
                  <Link to="/dropdown"><Button bsStyle="link" onClick={()=>this.itemClick('/dropdown')}>Dropdowns</Button></Link>
                  <Link to="/menuItms"><Button bsStyle="link" onClick={()=>this.itemClick('/menuItms')}>MenuItems</Button></Link>
                  <Link to="/modals"> <Button bsStyle="link" onClick={()=>this.itemClick('/modals')}>Modals</Button></Link>
              </ButtonToolbar>
              <hr/>
              {layout}
          </div>
        );
    }
}

const mapDispatchToProps=dispatch=>({
    actions:bindActionCreators(actions,dispatch)
});

const mapStateToProps=state=>{
    const { postsByReddit }=state
    let replies=[],topics=[],topic=[],results=postsByReddit['results']
    if(results){
        switch (results.type){
            case actions.TOPIC:
                topic=results.topic
                replies=results.replies
                break
            case actions.TOPICS:
                topics=results.topics
                break
            default:
                {}
        }
    }
    return {
        results:{
            replies,topics,topic
        }
    }
};


export default connect(mapStateToProps, mapDispatchToProps)(App)